<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link href="<%=basePath%>skin/css/public.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>skin/css/cart.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>skin/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/public.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/common.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	navi()

	var $quantity = $("input[name='quantity']");
	var $increase = $(".plus");
	var $decrease = $(".minus");
	var $delete = $("a.delete");
	var $effectivePrice = $(".total-price");
	var $clear = $("#clear");
	var $submit = $(".submit-btn");
	var $totalNum = $(".amount-total");
	var timeouts = {};
	var $cartnum = $("#cartnum");
	
	// 初始数量
	$quantity.each(function() {
		var $this = $(this);
		$this.data("value", $this.val());
	});
	
	// 只能输入数字
	$quantity.keypress(function(event) {
		var key = event.keyCode ? event.keyCode : event.which;
		if ((key >= 48 && key <= 57) || key==8) {
			return true;
		} else {
			return false;
		}
	});
	
	// 增加
	$increase.click(function() {
		var $quantity = $(this).siblings("input[name='quantity']");
		var quantity = $quantity.val();
		if (/^\d*[1-9]\d*$/.test(quantity)) {
			$quantity.val(parseInt(quantity) + 1);
		} else {
			$quantity.val(1);
		}
		edit($quantity);
	});
	
	// 减少
	$decrease.click(function() {
		var $quantity = $(this).siblings("input[name='quantity']");
		var quantity = $quantity.val();
		if (/^\d*[1-9]\d*$/.test(quantity) && parseInt(quantity) > 1) {
			$quantity.val(parseInt(quantity) - 1);
		} else {
			$quantity.val(1);
		}
		edit($quantity);
	});
	
	// 编辑数量
	$quantity.bind("input propertychange change", function(event) {
		if (event.type != "propertychange" || event.originalEvent.propertyName == "value") {
			edit($(this));
		}
	});
	
	// 编辑数量
	function edit($quantity) {
		var quantity = $quantity.val();
		if (/^\d*[1-9]\d*$/.test(quantity)) {
			var $tr = $quantity.closest("ul");
			var id = $tr.find("input[name='id']").val();
			clearTimeout(timeouts[id]);
			timeouts[id] = setTimeout(function() {
				$.ajax({
					url: "<%=basePath%>cart/edit.shtml",
					type: "POST",
					data: {id: id, quantity: quantity},
					dataType: "json",
					cache: false,
					beforeSend: function() {
						$submit.prop("disabled", true);
					},
					success: function(data) {
						var success = data.success;
						if (success == "true") {
							$quantity.data("value", quantity);
							$tr.find("span.subtotal").text(data.subtotal.toFixed(2));
							if (!data.isLowStock) {
								$tr.find("span.lowStock").remove();
							}
							$effectivePrice.text(data.price.toFixed(2));
						} else {
							if (success == "false") {
								alert(data.message);
							} else {
								alert("编辑失败");
							}
							$quantity.val($quantity.data("value"));
							setTimeout(function() {
								location.reload(true);
							}, 300);
						}
					},
					complete: function() {
						$submit.prop("disabled", false);
					}
				});
			}, 300);
		} else {
			$quantity.val($quantity.data("value"));
		}
		updateTotalNum();
	}
	
	function updateTotalNum(){
		var num = 0;
		$("input[name='quantity']").each(function(){
			num += parseInt($(this).val());
		});
		$totalNum.text("");
		$totalNum.text(parseInt(num));
		$cartnum.text(parseInt(num));
	}
	
	// 删除
	$delete.click(function() {
		if (confirm("您确定要删除吗？")) {
			var $this = $(this);
			var $tr = $this.closest("ul");
			var id = $tr.find("input[name='id']").val();
			clearTimeout(timeouts[id]);
			$.ajax({
				url: "<%=basePath%>cart/delete.shtml",
				type: "POST",
				data: {id: id},
				dataType: "json",
				cache: false,
				beforeSend: function() {
					$submit.prop("disabled", true);
				},
				success: function(data) {
					var success = data.success;
					if (success == "true") {
						if (data.quantity > 0) {
							$tr.remove();
							$effectivePrice.text(data.price.toFixed(2));
						} else {
							location.reload(true);
						}
						updateTotalNum();
					} else {
						setTimeout(function() {
							location.reload(true);
						}, 300);
					}
				},
				complete: function() {
					$submit.prop("disabled", false);
				}
			});
		}
		return false;
	});
	
	// 清空
	$clear.click(function() {
		if (confirm("您确定要清空吗？")) {
			$.each(timeouts, function(i, timeout) {
				clearTimeout(timeout);
			});
			$.ajax({
				url: "<%=basePath%>cart/clear.shtml",
				type: "POST",
				dataType: "json",
				cache: false,
				success: function(data) {
					var success = data.success;
					if (success == "true") {
						alert("清空成功");
					} else {
						alert("清空失败");
					}
					location.reload(true);
				}
			});
		}
		return false;
	});
	
	// 提交
	$submit.click(function() {
		if (!$.checkLogin()) {
			$.redirectLogin("<%=basePath%>cart/list.shtml");
			return false;
		} else {
			window.location.href='<%=basePath%>member/order/info.shtml';
		}
	});
});
</script>   

</head>
<body>
	<div class="cart">
    	<div class="container">
        	<div class="header-wrap">
        		<c:import url="/layouts/top.jsp" />
                <c:import url="/layouts/head.jsp" />
                <div class="nav-warp">
					<div class="nav-main-warp wp">
						<div class="head-v3">
							<div class="navigation-up">
								<div class="navigation-inner">
									<div class="navigation-v3">
										<ul>
											<li class="fLeft navi_product first" _t_nav="product">
												<h2>
													<a href="<%=basePath%>shop/product/list.shtml">全部产品
														<img src="<%=basePath%>skin/images/all-product-arrow.png" />
													</a>
												</h2>
											</li>
											<li class="nav-up-selected-inpage fLeft" _t_nav="home">
												<h2>
													<a href="<%=basePath%>">美嘉商城</a>
												</h2>
											</li>
											<li class="fLeft self_community" _t_nav="community">
												<h2>
													<a href="javascript:void(0)">美嘉社区</a>
												</h2>
											</li>
											<li class="fLeft technology" _t_nav="technology">
												<h2>
													<a href="#">饲养技术</a>
												</h2>
											</li>
											<li class="fLeft server" _t_nav="server">
												<h2>
													<a href="">美嘉服务</a>
												</h2>
											</li>
											<li class="fLeft know" _t_nav="know">
												<h2>
													<a href="aboutMJ.html">了解美嘉</a>
												</h2>
											</li>
											<li class="fLeft navi_cart" _t_nav="cart">
												<h2>
													<a href="<%=basePath%>cart/list.shtml">
														<img src="<%=basePath%>skin/images/cart-icon.png" />购物车（<span id="cartnum">0</span>）
													</a>
												</h2>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="navigation-down">
								<div id="product" class="nav-down-menu menu-1"
									style="display: none;" _t_nav="product">
									<div class="navigation-down-inner">
										<c:forEach items="${productCategoryTree }" var="productCategory">
											<c:if test="${productCategory.grade == 0 }">
												<div class="navi-down-area">
													<a href="<%=basePath%>shop/product/list.shtml?productCategoryId=${productCategory.id }" class="product-cate">
														<img src="<%=basePath%>download.shtml?filepath=${productCategory.source}" />
													</a>
													<ul>
														<li><a href="<%=basePath%>shop/product/list.shtml?productCategoryId=${productCategory.id }">${productCategory.name}</a></li>
														<div class="clear"></div>
													</ul>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</div>
								
								<div id="community" class="nav-down-menu menu-3" style="display: none;" _t_nav="community">
                                    <div class="navigation-down-inner">
                                    	<div class="navi-down-area-second">
                                        	<a href="<%=basePath%>forumTopic/list.shtml" class="product-cate"><img src="<%=basePath%>skin/images/mjbbs.png" /></a>
                                        </div>
                                        <div class="navi-down-area-second">
                                        	<a href="<%=basePath%>collegeTopic/list.shtml" class="product-cate"><img src="<%=basePath%>skin/images/mjschool.png" /></a>
                                        </div>
                                    </div>
                                </div>
							</div>
						</div>
					</div>
				</div>
            </div>
        	<div class="content">
        		<c:choose>
					<c:when test="${cart == null || empty cart || cart.quantity < 1 }">
						<div class="cart-empty">
		                    <div class="message">
		                        <ul>
		                            <li class="txt"> 购物车空空的哦~，去看看心仪的商品吧~ </li>
		                            <li>
		                            	<a class="" href="<%=basePath%>index.htm"> 去购物> </a>
		                            </li>
		                        </ul>
		                    </div>
		                </div>
					</c:when>
					<c:otherwise>
						<div>
		                    <div class="stepbar">
		                        <h1 class="buy-logo">确认订单</h1>
		                        <ol class="tb-stepbar">
		                            <li class="step-5 stepbar-current stepbar-first"><span>查看购物车</span></li>
		                            <li class="step-5"><span>提交订单</span></li>
		                            <li class="step-5"><span>付款</span></li>
		                            <li class="step-5 stepbar-last"><span>等待收货</span></li>
		                        </ol>
		                    </div>
		                    <div class="cart-layout">
		                        <div class="cart">
		                            <div class="cart-filter-bar">
		                                <ul class="switch-cart">
		                                    <li class="btn-switch-cart current ">
		                                        <a href="javascript:void(0)">
		                                            <em>全部商品</em>
		                                            <%-- <span class="number">(${cart.quantity })</span> --%>
		                                            <span class="pipe"></span>
		                                        </a>
		                                    </li>
		                                </ul>
		                                <div class="cart-sum">
		                                   	 已选商品(不含运费)：
		                                    <strong class="price">¥<em class="total-price"><fmt:formatNumber value="${cart.price }" pattern="0.00"/></em></strong>
		                                    <a class="submit-btn" href="javascript:void(0)">提 交</a>
		                                </div>
		                                <div class="wrap-line">
		                                    <div class="floater" style="width: 90px; left: -1px;"></div>
		                                </div>
		                            </div>     
		                            <div class="cart-main">
		                                <div class="order-body">
		                                        <div class="order-content">
		                                            <div class="item-list">
		                                                <div class="bundle bundle-last ">
		                                                    <div class="bundle-hd">
		                                                        <div class="cart-table-th">
		                                                            <div class="wp">
		                                                                <div class="th th-chk">
		                                                                </div>
		                                                                <div class="th th-item">
		                                                                    <div class="td-inner">商品信息</div>
		                                                                </div>
		                                                                <div class="th th-info">
		                                                                    <div class="td-inner">&nbsp;</div>
		                                                                </div>
		                                                                <div class="th th-price">
		                                                                    <div class="td-inner">单价（元）</div>
		                                                                </div>
		                                                                <div class="th th-amount">
		                                                                    <div class="td-inner">数量</div>
		                                                                </div>
		                                                                <div class="th th-sum">
		                                                                    <div class="td-inner">金额（元）</div>
		                                                                </div>
		                                                                <div class="th th-op">
		                                                                    <div class="td-inner">操作</div>
		                                                                </div>
		                                                            </div>
		                                                        </div>
		                                                    </div>
		                                                    <div class="bundle-main">
		                                                        <div class="item-list">
		                                                        	<c:forEach items="${cart.cartItems }" var="cartItem">
			                                                            <div class="item-body">
			                                                                <ul class="item-content clearfix">
			                                                                	<input type="hidden" name="id" value="${cartItem.id}" />
			                                                                    <li class="td td-chk">
			                                                                        <div class="td-inner">
			                                                                            <div class="cart-checkbox ">
			                                                                                <!-- <input type="checkbox"  name="product" onclick="ChkSonClick('product','chkAll')"> -->
			                                                                            </div>
			                                                                        </div>
			                                                                    </li>
			                                                                    <li class="td td-item">
			                                                                        <div class="td-inner">
			                                                                            <div class="item-pic img-loaded">
												                                             <a href="<%=basePath%>shop/product/detail.shtml?productId=${cartItem.product.id }"><img src="<%=basePath%>download.shtml?filepath=${cartItem.product.thumbnail }" /></a>
			                                                                            </div>
			                                                                            <div class="item-info">
			                                                                                <div class="item-basic-info">
			                                                                                    <a class="item-title" title="" target="_blank" href="<%=basePath%>shop/product/detail.shtml?productId=${cartItem.product.id }">${cartItem.product.name }</a>
			                                                                                </div>
			                                                                                <div class="item-other-info">
			                                                                                   
			                                                                                    <div class="item-icon-list clearfix">
			                                                                                        <div class="item-icons item-icons-fixed ">
			                                                                                            <%-- 
			                                                                                            <a class="item-icon item-icon-0" title="" href="javascript:void(0)">
			                                                                                            	<img alt="支持信用卡支付" src="<%=basePath%>skin/images/pay_card.png">
			                                                                                            </a> 
			                                                                                            --%>
			                                                                                        </div>
			                                                                                    </div>
			                                                                                </div>
			                                                                            </div>
			                                                                        </div>
			                                                                    </li>
			                                                                    <li class="td td-info">
			                                                                        <div class="item-props item-props-can">
			                                                                            <p class="sku-line">${cartItem.product.name }</p>
			                                                                        </div>
			                                                                    </li>
			                                                                    <li class="td td-price">
			                                                                        <div class="td-inner">
			                                                                            <div class="item-price price-promo-seller">
			                                                                                <div class="price-content">
			                                                                                    <div class="price-line">
			                                                                                        <em class="price-now" ><fmt:formatNumber value="${cartItem.price }" pattern="0.00"/></em>
			                                                                                    </div>
			                                                                                </div>
			                                                                            </div>
			                                                                        </div>
			                                                                    </li>
			                                                                    <li class="td td-amount">
			                                                                        <div class="td-inner">
			                                                                            <div class="amount-wrapper relative">
			                                                                                <div class="item-amount ">
			                                                                                    <a class="minus" href="javascript:void(0)">-</a>
			                                                                                    <input class="text text-amount" type="text" value="${cartItem.quantity }" name="quantity" maxlength="4" onpaste="return false;">
			                                                                                    <a class="plus" href="javascript:void(0)">+</a>
			                                                                                </div>
			                                                                            </div>
			                                                                        </div>
			                                                                    </li>
			                                                                    <li class="td td-sum">
			                                                                        <div class="td-inner">
			                                                                            <em class="single-total"><span class="subtotal"><fmt:formatNumber value="${cartItem.subtotal }" pattern="0.00"/></span></em>
			                                                                        </div>
			                                                                    </li>
			                                                                    <li class="td td-op">
			                                                                        <div class="td-inner">
			                                                                            <a href="javascript:void(0)" class="delete">删除</a>
			                                                                        </div>
			                                                                    </li>
			                                                                    <li class="clear"></li>
			                                                                </ul>
			                                                            </div>
		                                                            </c:forEach>
		                                                        </div>  
		                                                    </div>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </div>
		                            </div>
		                            <div class="float-bar-holder">
		                                <div class="float-bar clearfix fixed-bottom" style="position:static;">
		                                    <div class="float-bar-wrapper">
		                                        <!-- 
		                                        <div class="select-all">
		                                            <div class="cart-checkbox">
		                                                <input  type="checkbox" value="true" name="select-all"  id="chkAll" onClick="ChkAllClick('product','chkAll')">
		                                            </div>
		                                             	全选
		                                        </div>
		                                        <div class="operations">
		                                            <a href="javascript:void(0)">删除</a>
		                                        </div>
		                                        -->
		                                        <div class="float-bar-right">
		                                            <div class="amount-sum">
		                                                <span class="txt">已选商品</span>
		                                                <em class="amount-total">${cart.quantity }</em>
		                                                <span class="txt">件</span>
		                                            </div> 
		                                            <div class="pipe"></div>
		                                            <div class="price-sum">
		                                                <span class="txt">合计(不含运费)：</span>
		                                                <strong class="price">
		                                                   	￥<em class="total-price"><fmt:formatNumber value="${cart.price }" pattern="0.00"/></em>
		                                                </strong>
		                                            </div>
		                                            <div class="btn-area">
		                                                <a class="submit-btn" href="javascript:void(0)">
		                                                	<span>提 交</span>
		                                                <!--<span class="f16">正在提交...</span>-->
		                                                <b></b></a>
		                                            </div>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
					</c:otherwise>
				</c:choose>
			</div>
			<%-- <c:import url="/layouts/foot.jsp" /> --%>
        </div>
    </div>
</body>
</html>
